import popupInfo from "../../components/popupInfo.js";
import squareButton from "../../components/squareButton.js";
import {getAllTopics, getLoginDoctor, getLoginUser, getUserOrDoctor} from "../utils/common_network.js";
import popupWindowWrapper from "../../components/popupWindowWrapper.js";
import {ResultCode} from "../../network.js";

export default {
    components: {
        'popup-info': popupInfo,
        'square-button': squareButton,
        popupWindowWrapper
    },
    props: {
        pageNum: {
            type: [Number, String],
            default: 1
        }
    },
    setup(props) {
        const popup = Vue.ref(null);
        const router = VueRouter.useRouter();
        const topicPage = Vue.ref({records: [], current: props.pageNum, pages: 1});
        const searchInfo = Vue.ref("");

        function onExitClick() {
            popup.value.onConfirm = () => {
                router.go(-1);
            };
            popup.value.show("您确定要退出本页面吗?");
        }

        Vue.onMounted(async () => {
            await getUserOrDoctor(popup, () => {
                router.push('/');
            }, user);
            getAllTopics(searchInfo.value, props.pageNum, topicPage);
            createTopicPopup.value.widthInParent = 80;
            createTopicPopup.value.heightInParent = 80;
            createTopicPopup.value.wrapperStyle = {
                'background': 'rgb(240, 243, 253)'
            };
            // createTopicPopup.value.show();
        });

        const user = Vue.ref({name: "", type: ""});

        async function onTextChange() {
            console.log(searchInfo.value);
            await getAllTopics(searchInfo.value, props.pageNum, topicPage);
        }

        const createTopicPopup = Vue.ref(null);

        function onCreateTopicClick() {
            if (user.value.type !== "用户") {
                popup.value.show("仅允许用户创建问题！");
                return;
            }
            createTopicPopup.value.onConfirm = () => {
                if (formTitle.value === "") {
                    popup.value.onConfirm = onCreateTopicClick;
                    popup.value.show("请输入标题！");
                    return;
                }
                if (formContent.value === "") {
                    popup.value.onConfirm = onCreateTopicClick;
                    popup.value.show("请输入内容！");
                    return;
                }
                axios.post("/topic/create", {
                    title: formTitle.value,
                    content: formContent.value
                }).then(r => {
                    if (r.data.code === ResultCode.SUCCESS) {
                        const refresh = () => {
                            router.go(0);
                        };
                        popup.value.onConfirm = refresh;
                        popup.value.onCancel = refresh;
                        popup.value.show("发表成功");
                    } else {
                        popup.value.show(r.code.message);
                    }
                }).catch(e => {
                    popup.value.show("网络连接异常！");
                });
            };
            createTopicPopup.value.show();
        }

        function onMove() {
            console.log('onMove');
        }

        const formTitle = Vue.ref("");
        const formContent = Vue.ref("");

        function onTopicClick(tid) {
            console.log(tid);
            router.push('/topic_reply/' + tid + '/1');
        }

        const gotoPageNum = Vue.ref(undefined);
        return {
            router, popup, onExitClick, topicPage,
            onTextChange, searchInfo, createTopicPopup,
            onCreateTopicClick, onMove, formTitle, formContent, user,
            onTopicClick, gotoPageNum
        }
    },
    template: `
<div class="container-fluid" style="height: 100%;">
    <popupWindowWrapper
        ref="createTopicPopup">
        <div style="width: 100%;height: 100%;padding: 60px;">
            <div style="text-align: left;font-size: 26px;" class="my-font">
                <img src="/images/topic_info/new_topic.svg" 
                style="width: 35px;float: left;margin-right: 20px;" alt="">
                新问题
            </div>
            <div style="padding-top: 20px;">
                <input type="text" style="width: 100%; font-size: 22px;" 
                    placeholder="请输入标题" class="my-font"
                    v-model="formTitle"/>
            </div>
            <div style="padding-top: 30px;text-align: left;height: 80%;padding-bottom: 30px;">
                <textarea style="height: 100%;resize: none;font-size: 20px;width: 100%;"
                    v-model="formContent" placeholder="请输入内容" class="my-font"
                    ></textarea>
            </div>
        </div>
    </popupWindowWrapper>
    <square-button background-url="/images/exit_images/exit2.svg"
                   :height=40
                   left="5%"
                   bottom="20px"
                   @onClick="onExitClick"
    ></square-button>
    <square-button background-url="/images/topic_info/new_topic.svg"
                   :height=40
                   left="15%"
                   bottom="20px"
                   @onClick="onCreateTopicClick"
    ></square-button>
    <popup-info ref="popup"></popup-info>
    <div class="row" style="height: 100%;">
        <div class="col-md-3" style="border-right: 1px solid;height: 100%;background: rgb(241, 246, 250);">
            <img src="/images/logo.png" style="width: 40%;cursor: pointer;margin-left: 30%;"
                @click="router.push('/')">
            <div style="text-align: center; font-size: 22px;margin-top: 40px;">
                姓名:{{user.name}}<br><br>
                账户类型:{{user.type}}
            </div>
        </div>
        <div class="col-md-9 nss-font" style="padding-left: 0; padding-right: 0;height: 100%;
            max-height: 100%; overflow-y: auto;">
            <div style="font-size: 26px; text-align: center; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid;">
                问题讨论
            </div>
            <div style="font-size: 24px; padding-top: 15px; padding-bottom: 15px;
             padding-left: 20px; border-bottom: 1px solid;">
                搜索
                <input type="text" style="width: 70%; margin-left: 10%;"
                    @input="onTextChange" v-model="searchInfo"/>
            </div>
            <div style="width: 100%; padding: 10px; border-bottom: 1px solid;font-size: 20px;
                text-align: center;"
                v-show="topicPage.pages === 0">
                暂无搜索结果
            </div>
            <div style="width: 100%; padding: 10px; border-bottom: 1px solid;
                font-size: 18px; text-align: center;" v-show="topicPage.pages > 0">
                <button :disabled="topicPage.current === 1" 
                    @click="router.push('/topic_info/' + (Number(topicPage.current) - 1))">
                    上一页
                </button>
                第{{topicPage.current}}页&nbsp;共{{topicPage.pages}}页
                <input type="number" style="width: 50px;margin-right: 10px;" v-model="gotoPageNum"/>
                <button style="margin-right: 10px;"
                    @click="router.push('/topic_info/' + Number(gotoPageNum))">
                    跳转
                </button>
                <button :disabled="topicPage.current === topicPage.pages" 
                    @click="router.push('/topic_info/' + (Number(topicPage.current) + 1))">
                    下一页
                </button>
            </div>
            <div style="border-bottom: 1px solid; padding-left: 20px; cursor: pointer;
                padding-top: 10px; padding-bottom: 10px;font-size: 20px;"
                v-for="(item, index) in topicPage.records" @click="onTopicClick(item.id)">
                <span style="font-size: 24px;">
                    标题：{{item.title}}
                </span>
                <br>
                问题描述：
                <div style="text-indent: 2em;white-space: pre-line;">
                    {{item.content.length >= 100 ? item.content.slice(0, 97) + "..." : item.content}}
                </div>
            </div>
            <div style="width: 100%; padding: 10px; border-bottom: 1px solid;
                font-size: 18px; text-align: center;" v-show="topicPage.pages > 0">
                <button :disabled="topicPage.current === 1" 
                    @click="router.push('/topic_info/' + (Number(topicPage.current) - 1))">
                    上一页
                </button>
                第{{topicPage.current}}页&nbsp;共{{topicPage.pages}}页
                <input type="number" style="width: 50px;margin-right: 10px;" v-model="gotoPageNum"/>
                <button style="margin-right: 10px;"
                    @click="router.push('/topic_info/' + Number(gotoPageNum))">
                    跳转
                </button>
                <button :disabled="topicPage.current === topicPage.pages" 
                    @click="router.push('/topic_info/' + (Number(topicPage.current) + 1))">
                    下一页
                </button>
            </div>
        </div>
    </div>
</div>`
}